<ion-content>
  <div
    style="margin: 24px 24px 12px 24px; display: flex; flex-direction: column"
  >
    <ion-item style="padding-bottom: 8px">
      <ion-label>
        <h1>{{ options.title }}</h1>
        <br />
        <p>{{ options.message }}</p>
        <ng-container *ngIf="options.warning">
          <br />
          <p>
            <ion-text color="warning">{{ options.warning }}</ion-text>
          </p>
        </ng-container>
      </ion-label>
    </ion-item>

    <form (ngSubmit)="submit()">
      <div style="margin: 0 0 24px 16px">
        <p class="input-label">{{ options.label }}</p>
        <ion-item
          lines="none"
          [color]="(theme$ | async) === 'Light' ? 'light' : 'dark'"
        >
          <ion-input
            #mainInput
            type="text"
            name="value"
            [ngModel]="masked ? maskedValue : value"
            (ngModelChange)="transformInput($event)"
            [placeholder]="options.placeholder"
            (ionChange)="error = ''"
          ></ion-input>
          <ion-button
            slot="end"
            *ngIf="options.useMask"
            fill="clear"
            color="light"
            (click)="toggleMask()"
          >
            <ion-icon
              slot="icon-only"
              [name]="!masked ? 'eye-off-outline' : 'eye-outline'"
              size="small"
            ></ion-icon>
          </ion-button>
        </ion-item>
        <!-- error -->
        <p *ngIf="error">
          <ion-text color="danger">{{ error }}</ion-text>
        </p>
      </div>

      <div class="ion-text-right">
        <ion-button fill="clear" (click)="cancel()">Cancel</ion-button>
        <ion-button
          fill="clear"
          type="submit"
          [disabled]="!value && !options.nullable"
        >
          {{ options.buttonText }}
        </ion-button>
      </div>
    </form>
  </div>
</ion-content>
